<template>
    <div class="body-color">
        <Header></Header>
        <div class="container-fluid">
            <div>

                <div class="block-title">
                    <h1>Block</h1>
                    <div>#{{inputValue}}</div> 
                </div>
                <hr>
               
            </div>
            
            <!--  -->
            <div class="block-body">
              <div class="block-left">
              <div>  Block Height:</div>
              <div>  Timestamp:</div>
              <div>  Transactions:</div>
              <hr id="block-hr">
              <div>  Fee Recipient:</div>
              <div>  Block Reward:</div>
              <div>  Total Difficulty:</div>
              <div>  Size:</div>
              <hr id="block-hr">
              <div>  Gas Used:</div>
              <div>  Gas Limit:</div>
              <div>  Base Fee Per Gas:</div>
              <div>  Burnt Fees:</div>
              <div>  Extra Data:</div>
              </div>
              <div class="block-right">
                <div> {{items.number}}</div>
                <div> {{getTimeDifference(items.timestamp)}} ({{items.updateAt}})</div>
                <div> {{items.transactions}} transactions </div>
                <hr id="block-hr" style="background-color: #eef0f3">
                <div>{{items.miner}}  in {{getTimeDifference(items.timestamp)}}</div>
                <div> {{items.totalReward}} ZTC </div>
                <div>{{items.totalDifficulty}}</div>
                <div> {{items.size}} bytes</div>
                <hr id="block-hr" style="background-color: #eef0f3">
                <div> {{items.gasUsed}}</div>
                <div> {{items.gasLimit}} </div>
                <div> {{items.baseFeePerGas}} ZTC</div>
                <div> 🔥 {{items.totalBurntFees}} ZTC</div>
                <div> Hex:{{items.extraData}}</div>
              </div>
            
            </div>


        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import '@/assets/css/BlockInfo.css'
import {getBrowserBlockInfo} from "@/api/home.js"
export default {
    name: 'BlockInfo',
    data(){
        return{
            blockId: '',
            inputValue: '',
            items:{}

        }
    },
  methods:{

   
     formatString(str) {
      if (str.length <= 20) {
        return str;
      } else {
        return `${str.substr(0, 8)}....${str.substr(-8)}`;
      }
    },


   
    getTimeDifference(time){
       var times= this.differenceInSeconds(time);//秒
       if(times>60){
        times= (times / 60).toFixed(0); //分
        if(times>60){
        times= (times / 60).toFixed(0); // 根据需要调整小数位数
        if(times>24){
         return times= (times / 24).toFixed(0)+" day ago";
        }else{
            return times+" hour ago";
        }
        }else{
            return times+" minute ago"; //分
        }
       }else{
        return times+" secs ago"; //秒
       }
    },
    
     differenceInSeconds(time) {
      const start = time;
      const end = Math.floor(Date.now() / 1000);
      const difference = (end - start); 
      return difference;
    },


   async onLoadBlock(){
      const res=await getBrowserBlockInfo({
        blockNum:Number(this.inputValue),
       })
     this.items=res.data
   },
  },
  created() {
    this.blockId = this.$route.params.blockId;
    this.inputValue = this.$route.params.inputValue;
    this.onLoadBlock();
  },
  
}
</script>

<style>
.body-color{
  background-color: rgb(0, 0, 0);;
}
</style>